<template>
    <div class="production-container">
        <div class="production-header">
            <el-radio-group v-model="options">
                <el-radio value="purchase">生产管控</el-radio>
                <el-radio value="production">生产列表</el-radio>
                <el-radio value="log">生产日志</el-radio>
            </el-radio-group>
        </div>
        <el-divider />
        <div class="production-body">
            <!-- 生产管控 -->
            <ViewPurchaseList v-if="options === 'purchase'"></ViewPurchaseList>
            <!-- 生产列表 -->
            <ViewProductionList v-else-if="options === 'production'"></ViewProductionList>
            <!-- 生产日志 -->
            <ViewProductionLog v-else></ViewProductionLog>
        </div>
    </div>
</template>

<script setup lang="ts">
import ViewPurchaseList from './components/ViewPurchaseList.vue';
import ViewProductionList from './components/ViewProductionList.vue';
import ViewProductionLog from './components/ViewProductionLog.vue';

/* ******************************通用属性/方法****************************** */
const options = ref<'purchase' | 'production' | 'log'>('purchase');
</script>

<style scoped lang="scss">
.production-container {
    height: calc(100vh - 80px);
    .production-header {
        height: 49px;
    }
    .production-body {
        height: calc(100vh - 180px);
    }
}
</style>
